import React from 'react';
import {connect} from 'dva';
import withRouter from 'umi/withRouter';
import {Layout} from '../../../components';
import { Tabs,Card,Divider,Table,Row, Col,Button,Steps} from 'antd';
import {ViewOrderRecordModal} from './orderDetailModal';
// import styles from './orderDetail.less';
const {PageHeader,StepBar,DescriptionList,Sticky} =Layout
const { Description } = DescriptionList;
const Step = Steps.Step;
const TabPane = Tabs.TabPane;


const dataSource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  }, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }];
  
  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  }];
  const description = (
    <DescriptionList size="small" col="2">
      <Description term="订单状态">
        <b style={{fontSize:'18px',fontWeight:'normal'}} className="brown">
            待确认
        </b>
      </Description>
    </DescriptionList>
  );
  const description1 = (
    <DescriptionList size="small" col="1">
      <Description term="订单状态">
        <b style={{fontSize:'18px',fontWeight:'normal'}} className="brown">
            已取消
        </b>
      </Description>
      <Description term="取消时间">
        <div style={{marginTop:10}}>
            2018-10-08 12:23:15
            <div style={{display:'inline-block',marginLeft:10}}>
                <ViewOrderRecordModal/>
            </div>
        </div>
      </Description>
    </DescriptionList>
  );
  const tabContent=[{
      title:"订单信息",
      href:"order"
  },{
    title:"付款信息",
    href:"pay"
},{
    title:"发货信息",
    href:"goods"
},{
    title:"发票信息",
    href:"ticket"
},{
    title:"商品明细",
    href:"shop"
}]




function OrderDetail({children, buyOrderDetail , dispatch, location, history}) {
    const {detail}=buyOrderDetail
    const {orderInfor,payInfor,step}=detail;
    console.log(buyOrderDetail)
    return(
        <div className={`orderDetail`} style={{padding:'35px 0'}}>
            <div style={{marginBottom:10}}>
                <PageHeader
                        title="单号：234231029431"
                        logo={
                        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
                        }
                        content={description}
                        extraContent={
                            <Steps current={0} style={{marginTop:'-200px'}}>
                                <Step title="提交订单" description="2018-08-24 16:55:30" />
                                <Step title="商家接单" description="2018-08-24 16:55:30" />
                                <Step title="交易中" description="2018-08-24 16:55:30" />
                                <Step title="已完成" description="2018-08-24 16:55:30" />
                            </Steps>
                        }
                    />
                <PageHeader
                        title="单号：234231029431"
                        logo={
                        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
                        }
                        content={description1}
                       
                    />
            </div>
            <div>
                <div>
                    <div id="order">
                        <Card title="订单概览"   style={{marginBottom:10}} bordered={false} extra={<Button type="primary" block>确认开票</Button>}>
                            <Row>
                                {
                                    orderInfor?
                                    <DescriptionList  col={1}>
                                        <Col span={6}>
                                            <Description term="商家">{orderInfor.order}</Description>
                                            <Description term="姓名">{orderInfor.style}</Description>
                                            <Description term="联系方式">{orderInfor.state}</Description>
                                        </Col>
                                        <Col span={6}>
                                            <Description term="采购公司">{orderInfor.order}</Description>
                                            <Description term="采购用户">{orderInfor.style}</Description>
                                        </Col>
                                        <Col span={6}>
                                            <Description term="交易方式">{orderInfor.order}</Description>
                                            <Description term="商品总金额">{orderInfor.style}</Description>
                                            <Description term="优惠金额">{orderInfor.state}</Description>
                                            <Description term="其它费用">{orderInfor.state}</Description>
                                        </Col>
                                        <Col span={6}>
                                            <Description term="合计金额"> ￥<b className="red" style={{fontSize:'22px',marginRight:10,verticalAlign:'-2px'}}>{orderInfor.total}</b></Description>
                                        </Col>
                                    </DescriptionList>:
                                    ''
                                }
                            </Row>
                        </Card>
                    </div>
                    <div id="goods">
                        <Card title="商品明细"  style={{marginBottom:10}} bordered={false}>
                            <Table dataSource={dataSource} columns={columns} />
                        </Card>                    
                    </div>
                </div>
            </div>
            <div style={{overflow:'hidden' }}>
                <Row gutter={10}>
                    <Col span={8}>
                        <Card title="付款信息" bordered={false}>
                            <DescriptionList  col={1}>
                                <Description term="收款方式">1</Description>
                                <Description term="收款金额">1</Description>
                                <Description term="收款时间">1</Description>
                            </DescriptionList>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="发货信息" bordered={false}>
                            <DescriptionList  col={1}>
                                <Description term="收款方式">1</Description>
                                <Description term="收款金额">1</Description>
                                <Description term="收款时间">1</Description>
                            </DescriptionList>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="开票信息" bordered={false}>
                            <DescriptionList  col={1}>
                                <Description term="收款方式">1</Description>
                                <Description term="收款金额">1</Description>
                                <Description term="收款时间">1</Description>
                                <Description term="收款时间">1</Description>
                            </DescriptionList>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="开票信息" bordered={false}>
                            {/* <DescriptionList  col={1}>
                                <Description term="收款方式">1</Description>
                                <Description term="收款金额">1</Description>
                                <Description term="收款时间">1</Description>
                            </DescriptionList> */}
                            <div style={{minHeight:'140px',lineHeight:'140px',textAlign:'center',fontSize:16}}>
                            暂无信息！

                            </div>
                        </Card>
                    </Col>
                </Row>
            </div>
        </div>
    )

}

export default withRouter(connect(({buyOrderDetail }) => ({buyOrderDetail }))(OrderDetail));
